<template>
  <div class="widget-form-container">
    <el-form
      ref="widgetForm"
      :label-position="data.labelPosition || 'left'"
      :label-width="data.labelWidth ? `${data.labelWidth}px` : '100px'"
      :model="form"
      size="small"
    >
      <el-row :gutter="data.gutter">
        <draggable
          class="widget-form-list"
          :list="data.column"
          :group="{ name: 'form' }"
          ghost-class="ghost"
          :animation="300"
          @add="handleWidgetAdd"
          @end="$emit('change')"
        >
          <template v-for="(column, index) in data.column">
            <!-- 表格 -->
            <el-col
              v-if="column.type == 'dynamic'"
              :key="index + 'dynamic'"
              :span="24"
              class="widget-form-table"
              :class="{ active: selectWidget.prop == column.prop }"
              @click.native="handleSelectWidget(index)"
            >
              <widget-form-table
                :data="data"
                :column="column"
                :index="index"
                :select.sync="selectWidget"
                @change="$emit('change')"
              />
            </el-col>
            <!-- 分组 -->
            <el-col
              v-else-if="column.type == 'group'"
              :key="index + 'group'"
              :span="24"
              class="widget-form-group"
              :class="{ active: selectWidget.prop == column.prop }"
              @click.native="handleSelectWidget(index)"
            >
              <widget-form-group
                :data="data"
                :column="column"
                :index="index"
                :select.sync="selectWidget"
                @change="$emit('change')"
              />
            </el-col>
            <el-col
              v-else
              :key="index + 'else'"
              :md="column.span || 12"
              :xs="24"
              :offset="column.offset || 0"
            >
              <el-form-item
                class="widget-form-item"
                :label="column.label?`${column.label+data.labelSuffix}`:''"
                :label-width="(column.labelWidth || column.labelWidth===0)?`${column.labelWidth}px`:undefined"
                :prop="column.prop"
                :class="[
                  {
                    active: selectWidget.prop == column.prop,
                    required: column.required,
                  },
                  'avue-form__item--' + column.labelPosition || '',
                ]"
                @click.native="handleSelectWidget(index)"
              >
                <widget-form-item :item="column" :params="column.params" />
                <el-button
                  v-if="selectWidget.prop == column.prop"
                  class="widget-action-delete"
                  title="删除"
                  circle
                  plain
                  size="small"
                  type="danger"
                  @click.stop="handleWidgetDelete(index)"
                >
                  <i class="iconfont icon-delete" />
                </el-button>
                <el-button
                  v-if="selectWidget.prop == column.prop"
                  class="widget-action-clone"
                  title="复制"
                  circle
                  plain
                  size="small"
                  type="primary"
                  @click.stop="handleWidgetClone(index)"
                >
                  <i class="iconfont icon-copy" />
                </el-button>
              </el-form-item>
            </el-col>
          </template>
        </draggable>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import WidgetFormItem from './WidgetFormItem'
  import WidgetFormTable from './WidgetFormTable'
  import WidgetFormGroup from './WidgetFormGroup'
  import Draggable from 'vuedraggable'

  export default {
    name: 'WidgetForm',
    components: { Draggable, WidgetFormItem, WidgetFormTable, WidgetFormGroup },
    props: ['data', 'select'],
    data() {
      return {
        selectWidget: this.select,
        form: {},
      }
    },
    watch: {
      select(val) {
        this.selectWidget = val
      },
      selectWidget: {
        handler(val) {
          this.$emit('update:select', val)
        },
        deep: true,
      },
    },
    methods: {
      handleSelectWidget(index) {
        console.log('被点击了吗', this.selectWidget, index)
        this.selectWidget = this.data.column[index]
      },
      handleWidgetAdd(evt) {
        const newIndex = evt.newIndex
        const data = this.deepClone(this.data.column[newIndex])
        const id = data.id = 'a' + Date.now() + Math.ceil(Math.random() * 99999)
        data.id = id
        if (!data.prop) {
          data.prop = id
        }
        delete data.icon
        delete data.subfield
        if (data.type === 'title') {
          delete data.label
          this.form[data.prop] = data.value
        }
        this.$set(this.data.column, newIndex, data)
        this.handleSelectWidget(newIndex)

        this.$emit('change')
      },
      handleWidgetDelete(index) {
        if (this.data.column.length - 1 === index) {
          if (index === 0) this.selectWidget = {}
          else this.handleSelectWidget(index - 1)
        } else this.handleSelectWidget(index + 1)

        this.$nextTick(() => {
          this.data.column.splice(index, 1)
          this.$emit('change')
        })
      },
      handleWidgetClone(index) {
        const cloneData = this.deepClone(this.data.column[index])
        cloneData.prop = 'a' + Date.now() + Math.ceil(Math.random() * 99999)
        this.data.column.push(cloneData)
        this.$nextTick(() => {
          this.handleSelectWidget(this.data.column.length - 1)
          this.$emit('change')
        })
      },
    },
  }
</script>

<style lang="less" scoped>
  @primary-color: #409eff;
  @primary-active-color: #ecf5ff;
  @primary-background-color: #ecf8ff;
  .widget-form-container {
    position: relative;
    height: 100%;

    .el-form {
      height: 100%;
      .el-row {
        height: 100%;
      }
    }

    .widget-form-list {
      height: 100%;
      padding-bottom: 50px;
      overflow: hidden;
      overflow-y: scroll;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: flex-start;

      .widget-form-item {
        min-height: 30px;
        padding: 5px 10px 18px;
        margin: 0;
        position: relative;
        border-left: 5px solid transparent;

        &.required {
          .el-form-item__label::before {
            content: '*';
            color: #f56c6c;
            margin-right: 4px;
          }
        }

        &:after {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          top: 0;
          display: block;
          z-index: 1001;
        }

        &:hover {
          background: @primary-background-color;
          cursor: move;
        }

        &.active {
          border-left: 3px solid @primary-color;
          background: @primary-active-color;
        }

        .widget-action-delete {
          position: absolute;
          right: 10px;
          bottom: -32px;
          z-index: 1002;
        }

        .widget-action-clone {
          position: absolute;
          right: 50px;
          bottom: -32px;
          z-index: 1002;
        }
      }

      .widget-form-table {
        position: relative;
        padding: 2px;
        float: left;
        width: 100%;

        &__content {
          display: flex;
          padding: 10px 5px;
          width: 100%;
          height: 100%;
          overflow-y: hidden;
          outline: 1px dashed #ccc;
          outline-offset: -1px;
          min-height: 103px;

          &::-webkit-scrollbar {
            width: 6px !important;
            height: 6px !important;
          }

          &::-webkit-scrollbar-thumb {
            background-color: #e5e7eb !important;
          }

          .ghost {
            background: white;
            border-left: 5px solid @primary-color;
            box-sizing: border-box;
            font-size: 0;
            content: '';
            overflow: hidden;
            padding: 0 !important;
            position: relative;
            outline: none 0;
            height: 100%;
            min-height: 90px;
            width: 0 !important;
            min-width: 0 !important;
            margin: 1px 2px 0 2px;
          }
        }

        &__item {
          position: relative;
          min-width: 33.3%;
          width: 33.3%;
          padding: 1px;
          height: 100%;

          &.required {
            .el-table__header .cell::before {
              content: '*';
              color: #f56c6c;
              margin-right: 4px;
            }
          }

          &.active {
            outline: 1px solid @primary-color;
            outline-offset: -1px;
          }

          &:hover {
            outline: 1px solid @primary-color;
            outline-offset: -1px;
            cursor: move;
          }

          &:after {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            display: block;
            content: '';
            z-index: 1001;
          }

          .widget-table-action-delete {
            position: absolute;
            right: 5px;
            bottom: -10px;
            z-index: 1002;
          }

          .widget-table-action-clone {
            position: absolute;
            right: 35px;
            bottom: -10px;
            z-index: 1002;

            i {
              font-size: 10px;
            }
          }
        }

        &.active {
          border-left: 3px solid @primary-color;
          background: @primary-active-color;
        }

        &:hover {
          background: @primary-background-color;
          cursor: move;
        }

        .widget-action-delete {
          position: absolute;
          right: 10px;
          bottom: -12px;
          z-index: 1001;
        }

        .widget-action-clear {
          position: absolute;
          right: 50px;
          bottom: -12px;
          z-index: 1001;
        }

        .widget-action-clone {
          position: absolute;
          right: 90px;
          bottom: -12px;
          z-index: 1001;
        }
      }

      .widget-form-group {
        position: relative;
        width: 100%;
        float: left;
        padding: 2px;

        &__head {
          margin: 10px;
        }

        &__body {
          min-height: 150px;
          height: 100%;
          outline: 1px dashed #ccc;
          outline-offset: -1px;
          overflow: hidden;
          padding-bottom: 15px;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;

          .ghost {
            background: white;
            border-left: 5px solid @primary-color;
            box-sizing: border-box;
            font-size: 0;
            content: '';
            overflow: hidden;
            padding: 0 !important;
            position: relative;
            outline: none 0;
            height: 100%;
            min-height: 57px;
            width: 0 !important;
            min-width: 0 !important;
            margin: 1px 2px 0 2px;
          }
        }

        &__item {
          padding: 10px;
          margin: 3px;
          position: relative;
          border-left: 5px solid transparent;
          background: white;

          &.required {
            .el-form-item__label::before {
              content: '*';
              color: #f56c6c;
              margin-right: 4px;
            }
          }

          &.active {
            outline: 1px solid @primary-color;
            outline-offset: -1px;
          }

          &:hover {
            outline: 1px solid @primary-color;
            outline-offset: -1px;
            cursor: move;
          }

          &:after {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            display: block;
            content: '';
            z-index: 1001;
          }

          &--delete {
            position: absolute;
            right: 0;
            bottom: -24px;
            z-index: 1002;
          }

          &--clone {
            position: absolute;
            right: 34px;
            bottom: -24px;
            z-index: 1002;
          }
        }

        &.active {
          border-left: 3px solid @primary-color;
          background: @primary-active-color;
        }

        &:hover {
          background: @primary-background-color;
          cursor: move;
        }

        .widget-action-delete {
          position: absolute;
          right: 10px;
          bottom: -12px;
          z-index: 1001;
        }

        .widget-action-clear {
          position: absolute;
          right: 50px;
          bottom: -12px;
          z-index: 1001;
        }

        .widget-action-clone {
          position: absolute;
          right: 90px;
          bottom: -12px;
          z-index: 1001;
        }
      }

      .iconfont {
        font-size: 13px;
      }

      .el-button--small.is-circle {
        padding: 7px;
      }
    }

    .ghost {
      background: white;
      border-top: 5px solid @primary-color;
      box-sizing: border-box;
      font-size: 0;
      content: '';
      overflow: hidden;
      padding: 0 !important;
      position: relative;
      outline: none 0;
      height: 0 !important;
      width: 100%;
      margin: 2px 0;
    }
  }
  ::v-deep .avue-form__item--right .el-form-item__label {
    text-align: right !important;
  }
  </style>
